<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="info-list"
      >
        <van-cell center title="添加新信息" icon="plus" @click="addData"/>
        <van-swipe-cell v-for="(item,index) in list" :key="index" stop-propagation :before-close="beforeClose"
                        :name="index">
          <van-cell @click="editData(index)">
            <div class="info-item"><span class="info-title">{{item.title}}</span> <span class="type">类型：{{item.type==0?'专家辟谣':'相关内容'}}</span><span
              class="info-time">{{item.time}}</span></div>
          </van-cell>
          <van-button
            slot="right"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </van-swipe-cell>

      </van-list>
    </van-pull-refresh>
    <!--添加弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="addShow"
      position="center"
      :style="{ height: '180px' }"
    >

      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.title" label="标题" placeholder="标题"/>
            <van-field v-model="form.type" type="digit" label="类型" placeholder="0：辟谣，1：相关"/>
            <van-field v-model="form.src" label="原文地址" placeholder="请输入原文地址"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="addShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="addDataConfirm">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!--编辑弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="editShow"
      position="center"
      :style="{ height: '180px' }"
    >

      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.title" label="标题" placeholder="标题"/>
            <van-field v-model="form.type" type="digit" label="类型" placeholder="0：辟谣，1：相关"/>
            <van-field v-model="form.src" label="原文地址" placeholder="请输入原文地址"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="editShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="editDataConfirm">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
  import {Notify, Dialog} from 'vant';

  export default {
    name: "Info",
    data() {
      return {
        list: [],
        page: 0,
        form: {},
        addShow: false,
        editShow: false,
        loading: false,
        finished: false,
        refreshing: false,
      }
    },
    methods: {
      beforeClose({name, position, instance}) {
        let id = this.list[name].id;
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
            Dialog.confirm({
              message: '确定删除吗？'
            }).then((res) => {
              console.log(res)
              this.$post("/info/del", {ids: [id]}).then(res => {
                if (res.code == 1) {
                  Notify({type: 'danger', message: '删除失败' + res.msg});
                  return;
                }
                Notify({type: 'success', message: '删除成功'});
                this.onRefresh();
              }).catch(function (err) {
                console.log(err);
              });
              instance.close();
            }).catch((res) => {
              instance.close();
            });
            break;
        }

      },
      onRefresh() {
        this.list = []
        this.page = 0;
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onLoad() {
        this.getData()
      },
      getData() {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        this.page++
        this.loading = true;
        this.$get("/info/list", {page: this.page}).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.finished = true;
            return;
          }

          this.loading = false;
          res.data.forEach((item) => {
            this.list.push(item);
          });

        }).catch(function (err) {
          console.log(err);
        });
      },
      addData() {
        this.form = {}
        this.addShow = true;
      },
      addDataConfirm() {
        if (this.form.title == "" || this.form.title == undefined) {
          Notify({type: 'danger', message: '请输入标题'});
          return;
        }
        if (this.form.type == "" || this.form.type == undefined) {
          Notify({type: 'danger', message: '请选择类型'});
          return;
        }
        if (this.form.src == "" || this.form.src == undefined) {
          Notify({type: 'danger', message: '请输入原文地址'});
          return;
        }
        this.$post("/info/add", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '添加失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '添加成功'});
          this.onRefresh();
          this.addShow = false;
        })
      },
      editData(index) {
        this.editShow = true;
        this.form = this.list[index];
        console.log(this.form);
      },
      editDataConfirm() {
        if (this.form.title == "" || this.form.title == undefined) {
          Notify({type: 'danger', message: '请输入标题'});
          return;
        }
        if (this.form.type == "" || this.form.type == undefined) {
          Notify({type: 'danger', message: '请选择类型'});
          return;
        }
        if (this.form.src == "" || this.form.src == undefined) {
          Notify({type: 'danger', message: '请输入原文地址'});
          return;
        }
        this.$post("/info/update", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '修改失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '修改成功'});
          this.onRefresh();
          this.editShow = false;
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .info-list {
    display: flex;
    flex-direction: column;
    margin: .6rem;
    .info-item {
      position: relative;
      padding-bottom: .06rem;
      .info-title {
        display: block;
        margin-right: 5.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666;
        font-size: .89rem;
      }
      .type {
        display: block;
        margin-right: 1.5rem;
        margin-left: 1rem;
        text-align: right;
        color: #161666;
        font-size: .69rem;
      }
      .info-time {
        font-size: .89rem;
        position: absolute;
        right: 0;
        top: 0;
        color: #666;
      }
    }
  }
  .delete-button {
    height: 100%;
  }
</style>
